<template>
	<div class="">
		<div class="Nav">
			<div class="secNav">
				<router-link :to="{name:'channel',params:{tid:curTid}}">推荐</router-link>
	            <router-link :to="{name:'channel',params:{tid:item.tid}}" v-for="(item,index) in NavList" :key="index">
	            	{{item.typename}}
	            </router-link>	
			</div>
		</div>
		<div class="tj" v-for="(item,index) in NavList">
			<div class="Sheader">
			    <p>{{item.typename}}</p>
				<div class="left">	
				    <p>查看更多</p>
					<svg>
						<use xlink:href="#icon-gengduo"></use>
				    </svg>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="c_wrap">
				<div class="fir" v-for="(item,index) in tj" v-if="index<4">
					<img :src="item.pic" />
					<p>{{item.title}}</p>
					<div class="dw">
						<svg>
							<use xlink:href="#icon-bofangshu"></use>
						</svg>
						<span>{{item.play}}</span>
						<svg id="icon-danmushu" viewBox="0 0 1024 1024" width="100%" height="100%">
							<path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path>
							<path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path>
						</svg>
						<span>{{item.video_review}}</span>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		
	</div>
</template>

<script>
import CONFIG from "@/config"
import axios from 'axios'
	let partitionList=window.__INITIAL_STATE__.reduxAsyncConnect.partitionList
	export default{
		props:{
			tid:{
				type:[String,Number],
				default:"1"
			}
		},
		created(){
			this.$store.commit("setCurTid",{
				curTid:this.$route.params.tid
			})
			this.NavList=partitionList[this.$store.getters.getCurTid]
//          this._SetSecondNavList(this.$route.params.tid)
		},
		mounted(){
			this.con();
			this._getTidList();
		},
		data(){
			return{
				NavList:[],
				curTid:"1",
				tj:[]
			}
		},
		computed:{
//			secondNavList:{
//				get:function(){
//					return this.NavList
//				},
//				set:function(newValue){
////					console.log(newValue)
////					console.log(this.curTid)
//					if(newValue){
//						this.curTid=this.tid
//					}
//					this.NavList=partitionList[this.curTid]
//				}
//			}	
		},
		methods:{
			_SetSecondNavList(tid){
				const hasCon=partitionList[tid]
//				console.log(hasCon);
				if(!hasCon){
//					遍历大对象的属性名(键名)
					let handleNav=function(){
						const keyArr=Object.keys(partitionList)
//						console.log(keyArr)
	//					核心代码: tid==obj.tid
	                    for(let i=0,len=keyArr.length;i<len;i++){
	//                  	一定要清楚,要访问的元素时什么
	//                  	console.log(partitionList[keyArr[i]])
	                    	const tmpArr=partitionList[keyArr[i]]
	                    	for(let j=0;j<tmpArr.length;j++){
	//                  		内循环
//	                            console.log(tmpArr[j])
	//                           核心代码
	                            if(tmpArr[j].tid==tid){
	                             	return keyArr[i]
	                            }
	                    	}
	                    }
					}
					this.curTid=handleNav()
				}else{
					this.curTid=tid
				}
				this.NavList=partitionList[this.curTid]
			},
			_getTidList(){
				this.tj=[];
				this.tidList=[];
				partitionList[this.$route.params.tid].forEach((el,index)=>{
					this.tidList.push(el.tid)
				})
				console.log("Tid盒子",this.tidList);//当前页面所需的tid
				this.tidList.forEach((el)=>{
					this.con(el)
				})
				console.log(this.tj)
			},
			con(){
				this.tj=[];
				var url = CONFIG.domain+"/rigion";
				axios.get(url,{
					params:{
						rid:this.tid
					}
				}).then((res,index)=>{
					res.data.data.forEach((el,index)=>{
						this.tj.push(el)
					})
					console.log(this.tj)
				})
			}
		},
		watch:{
			$route(newValue){
				this.$emit("PchangeTid",newValue.params.tid)
				this._SetSecondNavList(newValue.params.tid)
			},
			tid(newValue){
//				实时更新NavList的内容
//				this.NavList=partitionList[this.tid]
				this.secondNavList=partitionList[newValue]
				this.con()
			},
			
		}
	}
</script>

<style lang="scss" type="text/css">
.Nav{
	height:20px;
	overflow: hidden;
	background: #f4f4f4;
	padding-left: 10px;
	.secNav{
		display: inline-block;
		height: 30px;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		overflow-x: scroll;
		a{
		    color: #757575;
			margin-right: 20px;
			font-size: 14px;
		}
	}
}
.tj{
	width: 95%;
	margin: 0 auto;
	.Sheader {
		p {
			display: inline-block;
			font-size: 14px;
		}
		.left{
			display: inline-block;
			float: right;
			p {
				font-size: 12px;
				vertical-align: middle;
				display: inline-block;
				color: #999;
			}
			svg{
				width: 18px;
				height: 12px;
				fill: #aaa;
				vertical-align: middle;
			}
		}
	}
	.c_wrap{
		margin-top: 5px;
		.fir{
			width: 48%;
			position: relative;
			display: inline-block;
			margin-bottom: 20px;
			img{
				width: 100%;
				height: 87px;
				border-radius: 10px;
			}
			p{
				font-size: 10px;
				overflow: hidden;
				height: 32px;
			}
			.dw {
				position: absolute;
				bottom: 35px;
				left: 10px;
				svg{
					width: 12px;
					height: 20px;
					vertical-align: middle;
					fill: #fff;
				}
				span{
					font-size: 12px;
					vertical-align: middle;
					color: #fff;
				}
			}
	    }
		.fir:nth-of-type(2n){
			float: right;
		}
	}
}
</style>